<template>

   <div class="all">
     <div class="channel_top">
       <el-input placeholder="请输入渠道名、手机号查询" v-model="likeName" style="width: 400px; position: absolute; left: 200px;">
       </el-input>
       <el-button style="position: absolute;left: 650px;" @click="findchannelby">查询</el-button>
     <el-button style="position: absolute;left: 720px;" @click="addchannel">新增</el-button>
       <el-button style="position: absolute;left: 800px;" @click="delechannel">删除</el-button>
     </div>
     <div class="table1">
       <!-- 展示的表格组件 -->
       <el-table :data="members" :row-class-name="tableRowClassName" @selection-change="handleSelectionChange">
         <!-- 表格中多选框组件 -->
         <el-table-column type="selection" width="55">
         </el-table-column>
         <el-table-column prop="memberId" label="序列号" width="140">
         </el-table-column>
         <el-table-column prop="memberName" label="会员名名" width="120">
         </el-table-column>
         <el-table-column prop="memberPhone" label="手机号" width="120">
         </el-table-column>
         <el-table-column prop="memberYue" label="可用余额" width="120">
         </el-table-column>
         <el-table-column prop="memberFreeze" label="冻结金额" width="120">
         </el-table-column>
         <el-table-column prop="memberScore" label="可用积分" width="120">
         </el-table-column>
         <el-table-column prop="channelName" label="所属渠道" width="120">
         </el-table-column>
         <el-table-column prop="memberStat" :formatter="IsKill" label="状态" width="120">
         </el-table-column>
       <el-table-column label="操作" width="120">
           <template slot-scope="scope">
             <el-button @click="updatechannel(scope.row)" type="text" size="small">修改会员信息</el-button>
           </template>
         </el-table-column>
       </el-table>
       <!-- 分页组件 -->
       <el-pagination @size-change="handleSizeChange" @current-change="handleCurrentChange"
         :current-page.sync="pages.current" :page-size="pages.size" layout="total, prev, pager, next"
         :total="pages.total">
       </el-pagination>

  <el-dialog title="修改会员信息" :visible.sync="updateShopFormVisible" @close="shopClose">
             <el-form  label-width="80px">
               <el-form-item label="会员编号"  >
               	<el-input v-model="member.memberId" disabled="disabled"  ></el-input>
               </el-form-item>
               <el-form-item label="会员名">
               	<el-input v-model="member.memberName"  ></el-input>
               </el-form-item>
             	<el-form-item label="手机号">
             		<el-input v-model="member.memberPhone" placeholder="长度8-13位"></el-input>
             	</el-form-item>
             	<el-form-item label="证件号码">
             		<el-input v-model="member.memberIdNumber" placeholder="必须为数字"></el-input>
             	</el-form-item>
               <el-form-item label="开户行">
               	<el-input v-model="member.memberBank"></el-input>
               </el-form-item>
               <el-form-item label="银行账号">
               	<el-input v-model="member.memberBankAccount" placeholder="必须位数字"></el-input>
               </el-form-item>
                   <el-form-item label="会员等级">
                   	<template>
                         <el-radio v-model="member.memberLeve1" label="2">超级vip</el-radio>
                   	  <el-radio v-model="member.memberLeve1" label="1">钻石vip</el-radio>
                   	  <el-radio v-model="member.memberLeve1" label="0">黄金vip</el-radio>
                   	</template>
                      </el-form-item>
                      <el-form-item label="可用余额">
                      	<el-input v-model="member.memberYue" placeholder="必须是数字"></el-input>
                      </el-form-item>
                      <el-form-item label="结冻金额">
                      	<el-input v-model="member.memberFreeze" placeholder="必须是数字"></el-input>
                      </el-form-item>
                      <el-form-item label="积分">
                      	<el-input v-model="member.memberScore" placeholder="必须位数字"></el-input>
                      </el-form-item>

               <el-form-item label="状态">
               	<template>
               	  <el-radio v-model="member.memberStat" label="1">启用</el-radio>
               	  <el-radio v-model="member.memberStat" label="0">禁用</el-radio>
               	</template>
               </el-form-item>
              </el-form>
              <div slot="footer" class="dialog-footer">
                <el-button @click="updateShopFormVisible = false">取 消</el-button>
                <el-button type="primary" @click="updateWarOK">保存</el-button>
              </div>
            </el-dialog>


      <el-dialog title="新增会员" :visible.sync="addShopFormVisible" @close="shopClose">
              <el-form  label-width="80px">
                <el-form-item label="会员编号">
                	<el-input v-model="member.memberId" placeholder="长度不超过3,只能是数字不能为空" ></el-input>
                </el-form-item>
                <el-form-item label="会员名">
                	<el-input v-model="member.memberName"  ></el-input>
                </el-form-item>
            		<el-form-item label="手机号">
            			<el-input v-model="member.memberPhone" placeholder="长度8-13位"></el-input>
            		</el-form-item>
            		<el-form-item label="证件号码">
            			<el-input v-model="member.memberIdNumber" placeholder="只能是数字" ></el-input>
            		</el-form-item>
                <el-form-item label="开户行">
                	<el-input v-model="member.memberBank"></el-input>
                </el-form-item>
                <el-form-item label="银行账号">
                	<el-input v-model="member.memberBankAccount" placeholder="必须位数字"></el-input>
                </el-form-item>

                 <span class="demonstration">会员生日</span>
                    <el-date-picker
                      v-model="member.memberBirthday"
                      type="date"
                      placeholder="选择日期">
                    </el-date-picker>
                    <el-form-item label="会员等级">
                    	<template>
                          <el-radio v-model="member.memberLeve1" label="2">超级vip</el-radio>
                    	  <el-radio v-model="member.memberLeve1" label="1">钻石vip</el-radio>
                    	  <el-radio v-model="member.memberLeve1" label="0">黄金vip</el-radio>
                    	</template>
                       </el-form-item>
                       <el-form-item label="可用余额">
                       	<el-input v-model="member.memberYue" placeholder="必须是数字"></el-input>
                       </el-form-item>
                       <el-form-item label="结冻金额">
                       	<el-input v-model="member.memberFreeze" placeholder="必须是数字"></el-input>
                       </el-form-item>
                       <el-form-item label="积分">
                       	<el-input v-model="member.memberScore" placeholder="必须位数字"></el-input>
                       </el-form-item>

                <el-form-item label="状态">
                	<template>
                	  <el-radio v-model="member.memberStat" label="1">启用</el-radio>
                	  <el-radio v-model="member.memberStat" label="0">禁用</el-radio>
                	</template>
                </el-form-item>
               </el-form>
                
                <el-select v-model="channel" placeholder="请选择渠道商">
                   <el-option
                     v-for="item in channels"
                     :key="item.channelId"
                     :label="item.channelName"
                     :value="item.channelId">
                   </el-option>
                 </el-select>

              <div slot="footer" class="dialog-footer">
                <el-button @click="addShopFormVisible = false">取 消</el-button>
                <el-button type="primary" @click="addchannelOk">添加</el-button>
              </div>
            </el-dialog>
     </div>

   </div>
</template>

<script>
    export default{
      name:'member',
      data() {
        return {
          members: [],
          member: {
            memberId: "",
            memberName: "",
            memberPhone: "",
            memberYue: "",
            memberFreeze: "",
            memberScore: "",
            memberStat: "",
            memberBank: "",
            memberBankAccount: "",
            memberIdNumber: "",
             memberBirthday: "",
               memberLeve1: "",
                memberAdmissionDate: "",
                channelName:"",
          },
          current: "",
          size: "",
          pages: "",
          multipleSelection: [],
          likeName:"",
          addShopFormVisible:false,
          updateShopFormVisible:false,
          channels:[],
          channel:"",
        }
      },
      methods: {
        // 初始化页面查询生成
        getAllchannel(current, size) {
          this.$http.get("/member/getAllMember", {
            params: {
              current: current,
              size: size
            }
          }).then(resp => {
            console.log(resp)
            this.members = resp.data.data.records
            this.pages = resp.data.data
            this.current = resp.data.data.current
            this.size = resp.data.data.size
          })
        },
        IsKill(row, column) {
          if (row.channelStat == 1) {
            return "已启用"
          } else {
            return "已停用"
          }
        },
       //修改渠道商方法
        updatechannel(member){
            this.member=member
             this.updateShopFormVisible=true;
        },
        updateWarOK(){
          this.$http.post("/member/updateMember",{member :this.member}).then(resp=>{
            this.member={};
            this.updateShopFormVisible=false;
            alert(resp.data.message);
        })
        },
        // 模糊查询方法
        findchannelby(){
          this.findchannelbylike(1,2)
        },
        findchannelbylike(current,size){
          this.$http.get("/member/findMemberbylike",{
            params: {
              current:current,
              size: size,
              likeName:this.likeName
            }
          }).then(resp=>{
           this.members = resp.data.data.records
           this.pages = resp.data.data
           this.current = resp.data.data.current
           this.size = resp.data.data.size
          })
        },
        // 删除方法
        delechannel(){
          console.log(this.multipleSelection)
          this.$http.post("/member/delememberById",{members:this.multipleSelection}).then(resp=>{
            alert(resp.data.message)
            location.reload();
          })
        },
        // 新增方法
        addchannel(){
          this.$http.get("/channel/findAll").then(resp=>{
            this.channels=resp.data.data
          })
             this.addShopFormVisible=true;
        },
        addchannelOk(){
          this.$http.post("/member/addmember",{
            memberId:this.member.memberId,
            memberName:this.member.memberName,
            memberPhone:this.member.memberPhone,
            memberIdNumber:this.member.memberIdNumber,
            memberBank:this.member.memberBank,
            memberBankAccount:this.member.memberBankAccount,
            memberStat:this.member.memberStat,
            memberBirthday:this.member.memberBirthday,
            memberLeve1:this.member.memberLeve1,
            memberYue:this.member.memberYue,
            memberFreeze:this.member.memberFreeze,
            memberScore:this.member.memberScore,
            channelId:this.channel,
          }).then(resp=>{
            alert(resp.data.message)
           this.addShopFormVisible=false;
            location.reload();
          })

        },
        shopClose(){
       this.addShopFormVisible=false;
       this.updateShopFormVisible=false;
        },
        tableRowClassName({
          row,
          rowIndex
        }) {
          if (row.channelStat == 0) {
            return 'warning-row'
          }
        },
        // 分页选择
        handleCurrentChange(current) {
          if(this.likeName==""){
             this.getAllchannel(current, this.size)
          }else{
            this.findchannelbylike(current, this.size)
          }

        },
        handleSizeChange(size) {
         if(this.likeName==""){
            this.getAllchannel(this.current, size)
         }else{
           this.findchannelbylike(this.current, size)
         }
        }, //多选框选择的对象
        handleSelectionChange(val) {
          this.multipleSelection = val;
        },
      },
      created() {
        this.getAllchannel(1, 2)
      },
      watch:{
        'likeName':function(){
           this.findchannelbylike(1,2);
        }
      }
    }
</script>

<style>
  .channel_top {
    position: absolute;
    height: 50px;
    width: 1030px;
    left: 150px;
    top: 0px;
    background-color: skyblue;
  }

  .el-table .warning-row {
    background: yellow;
  }
  .table1 {
    position: absolute;
    top: 50px;
    left: 150px;
  }
</style>
